<template>
  <div class="container personal-center">
    <!-- 顶部资料区 -->
    <div class="profile-header">
      <div class="header-main">
        <div class="avatar-container">
          <div class="avatar">
            <span class="avatar-emoji">🦊</span>
          </div>
          <div class="user-info">
            <div class="nickname">{{ nickname }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 三项统计 -->
    <div class="tri-stats">
      <div class="stat" v-for="s in stats" :key="s.key" @click="onStatTap(s)">
        <div class="stat-num">{{ s.value }}</div>
        <div class="stat-label">{{ s.label }}</div>
      </div>
    </div>


    <!-- 我的服务 -->
    <div class="section">
      <div class="section-title">我的服务</div>
      <div class="service-grid">
        <div class="service-item" v-for="item in services" :key="item.action" @click="onService(item)">
          <div class="service-icon">{{ item.icon }}</div>
          <div class="service-text">{{ item.title }}</div>
        </div>
      </div>
    </div>

    <!-- 常用功能 -->
    

    <!-- 使用统计 -->
    <div class="section usage-stats-section">
      <div class="section-title">使用统计</div>
      <div class="usage-stats-container">
        <div class="main-stat">
          <div class="main-stat-icon">📄</div>
          <div class="main-stat-content">
            <div class="main-stat-number">{{ usageStats.totalDocuments }}</div>
            <div class="main-stat-label">生成文件数</div>
          </div>
        </div>
        <div class="sub-stats">
          <div class="sub-stat" v-for="stat in usageStats.dailyStats" :key="stat.type">
            <div class="sub-stat-icon" :style="{ backgroundColor: stat.color }">
              <span>{{ stat.icon }}</span>
            </div>
            <div class="sub-stat-content">
              <div class="sub-stat-title">{{ stat.title }}</div>
              <div class="sub-stat-value">本日使用 <span class="stat-number">{{ stat.value }}</span>次</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 地址管理 -->
    <div class="section">
      <div class="section-title">地址管理</div>
      <div class="address-card" @click="navigateToAddressManagement">
        <div class="address-card-icon">🏠</div>
        <div class="address-card-content">
          <div class="address-card-title">收货地址管理</div>
          <div class="address-card-desc">管理您的多个收货地址</div>
        </div>
        <div class="address-card-arrow">›</div>
      </div>
    </div>

    <!-- 使用记录 -->
    <div class="section">
      <div class="section-title">使用记录</div>
      <div class="usage-record-card" @click="navigateToUsageRecords">
        <div class="usage-record-icon">📋</div>
        <div class="usage-record-content">
          <div class="usage-record-title">查看历史记录</div>
          <div class="usage-record-desc">案由 · 问答时间 · 选择方案</div>
        </div>
        <div class="usage-record-arrow">›</div>
      </div>
    </div>

    <div class="safe-bottom"></div>
    
    <!-- 底部导航 -->
    <bottom-nav-h5
      :items="navItems"
      :current="2"
      theme="blue"
      @change="handleNavChange"
    />
  </div>
</template>

<script>
import BottomNavH5 from '@/components/bottom-nav-h5/bottom-nav-h5.vue'
import routerManager from '../../utils/router.js'

export default {
  name: 'PersonalCenter',
  components: {
    BottomNavH5
  },
  data() {
    return {
      nickname: '悲观的剪纸',
      stats: [],
      services: [
        { title: '我的调解', icon: '📺', action: 'mediation' },
        { title: '我的公证', icon: '💎', action: 'notary' },
        { title: '我的仲裁', icon: '⚖️', action: 'arbitration' },
        { title: '我的保全', icon: '🛡️', action: 'preserve' },
        { title: '律师服务', icon: '⚖️', action: 'lawyer' }
      ],
      commonFunctions: [
        { title: '发票管理', icon: '📧', action: 'invoice' },
        { title: '免费模板', icon: '📑', action: 'templates' },
        { title: '用户反馈', icon: '👥', action: 'feedback' },
        { title: '费用计算器', icon: '➕', action: 'calculator' }
      ],
      usageStats: {
        totalDocuments: 567,
        dailyStats: [
          {
            type: 'consultation',
            title: '诉状转换',
            value: 0,
            icon: '💬',
            color: '#3B82F6'
          },
          {
            type: 'generated',
            title: '诉状生成',
            value: 0,
            icon: '📄',
            color: '#10B981'
          },
          {
            type: 'answered',
            title: '咨询状生成',
            value: 0,
            icon: '✨',
            color: '#8B5CF6'
          }
        ]
      },
      navItems: [
        {
          text: '首页',
          iconText: '🏠',
          pagePath: '/pages/index/index'
        },
        {
          text: '便民服务',
          iconText: '🛠️',
          pagePath: '/pages/tools/index'
        },
        {
          text: '我的',
          iconText: '👤',
          pagePath: '/pages/personal-center/index'
        }
      ]
    }
  },
  methods: {
    // 底部导航切换
    handleNavChange(event) {
      console.log('个人中心页 - 底部导航切换:', event)
      const item = event.item // 直接使用事件传递的 item
      if (item.pagePath && item.pagePath !== '/pages/personal-center/index') {
        console.log('个人中心页 - 准备跳转到:', item.pagePath)
        this.navigateTo(item.pagePath)
      } else {
        console.log('个人中心页 - 当前页面，不跳转')
      }
    },
    
    navigateTo(path) {
      console.log('导航到:', path)
      if (path === '/pages/personal-center/index') {
        // 当前页面，不需要跳转
        return
      }
      
      // 底部导航的页面列表
      const tabPages = [
        '/pages/index/index',
        '/pages/tools/index',
        '/pages/personal-center/index'
      ]
      
      if (tabPages.includes(path)) {
        // 对于底部导航页面，使用 reLaunch 避免页面栈问题
        routerManager.reLaunch(path, {
          success: (res) => {
            console.log('页面跳转成功:', path)
          },
          fail: (err) => {
            console.error('页面跳转失败:', err)
            alert('页面跳转失败')
          }
        })
      } else {
        // 其他页面使用 navigateTo
        routerManager.navigateTo(path, {
          success: (res) => {
            console.log('页面跳转成功:', path)
          },
          fail: (err) => {
            console.error('页面跳转失败:', err)
            alert('页面跳转失败')
          }
        })
      }
    },
    
    onStatTap(s) {
      console.log(`${s.label}功能开发中`)
    },
    onService(item) {
      console.log(`${item.title}功能开发中`)
    },
    onCommonFn(fn) {
      console.log(`${fn.title}功能开发中`)
    },
    
    // 地址管理
    navigateToAddressManagement() {
      this.navigateTo('/pages/address-management/index')
    },
    
    // 使用记录
    navigateToUsageRecords() {
      this.navigateTo('/pages/usage-records/index')
    }
  }
}
</script>

<style scoped>
/* 容器样式 */
.container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  padding-bottom: 80px; /* 为底部导航留出空间 */
}

.personal-center {
  position: relative;
}

/* 顶部资料区 */
.profile-header {
  background: linear-gradient(135deg, #ffe8df 0%, #ffffff 70%);
  padding: 20px;
  border-radius: 0 0 20px 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.avatar-container {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 1;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
  position: relative;
}

.avatar-emoji {
  font-size: 32px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.user-info {
  flex: 1;
}

.nickname {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin-bottom: 6px;
}


/* 三项统计 */
.tri-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: white;
  margin: 0 20px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  margin-bottom: 20px;
}

.stat {
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  border-right: 1px solid #f0f0f0;
}

.stat:last-child {
  border-right: none;
}

.stat:hover {
  background: #f8fafc;
}

.stat-num {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: #333;
  margin-bottom: 4px;
}

.stat-label {
  display: block;
  font-size: 14px;
  color: #666;
}


/* 我的服务区域 */
.section {
  margin: 0 20px 20px;
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.section-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.service-item:hover {
  transform: translateY(-3px);
}

.service-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: all 0.2s ease;
}

.service-item:hover .service-icon {
  background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.service-text {
  font-size: 12px;
  color: #333;
  text-align: center;
  font-weight: 500;
}

/* 常用功能区域 */
.function-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.function-item:hover {
  transform: translateY(-3px);
}

.function-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: all 0.2s ease;
}

.function-item:hover .function-icon {
  background: linear-gradient(135deg, #17a2b8 0%, #20c997 100%);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
}

.function-text {
  font-size: 12px;
  color: #333;
  text-align: center;
  font-weight: 500;
}

/* 使用统计区域 */
.usage-stats-section {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin: 0 20px 20px;
}

.usage-stats-container {
  display: flex;
  gap: 20px;
  align-items: stretch;
}

.main-stat {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 16px;
  padding: 20px;
  flex: 1;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.main-stat-icon {
  font-size: 32px;
  opacity: 0.8;
}

.main-stat-content {
  flex: 1;
}

.main-stat-number {
  font-size: 32px;
  font-weight: 700;
  color: #3B82F6;
  margin-bottom: 4px;
  line-height: 1;
}

.main-stat-label {
  font-size: 14px;
  color: #64748B;
  font-weight: 500;
}

.sub-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.sub-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: white;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
  transition: all 0.2s ease;
}

.sub-stat:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sub-stat-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.sub-stat-icon span {
  color: white;
}

.sub-stat-content {
  flex: 1;
}

.sub-stat-title {
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 2px;
}

.sub-stat-value {
  font-size: 12px;
  color: #64748B;
}

.stat-number {
  font-weight: 700;
  color: #1E293B;
}

.safe-bottom {
  height: 20px;
}

/* 地址管理卡片样式 */
.address-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);
  border-radius: 12px;
  border: 1px solid #e0f2fe;
  cursor: pointer;
  transition: all 0.3s ease;
}

.address-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(14, 165, 233, 0.15);
  border-color: #0ea5e9;
}

.address-card-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
  flex-shrink: 0;
}

.address-card-content {
  flex: 1;
}

.address-card-title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 4px;
}

.address-card-desc {
  font-size: 13px;
  color: #64748b;
}

.address-card-arrow {
  font-size: 20px;
  color: #94a3b8;
  font-weight: 300;
}

/* 使用记录卡片样式 */
.usage-record-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: linear-gradient(135deg, #fef3f2 0%, #ffffff 100%);
  border-radius: 12px;
  border: 1px solid #fee2e2;
  cursor: pointer;
  transition: all 0.3s ease;
}

.usage-record-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
}

.usage-record-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
  flex-shrink: 0;
}

.usage-record-content {
  flex: 1;
}

.usage-record-title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 4px;
}

.usage-record-desc {
  font-size: 13px;
  color: #64748b;
}

.usage-record-arrow {
  font-size: 20px;
  color: #94a3b8;
  font-weight: 300;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-header {
    padding: 15px;
  }
  
  .avatar {
    width: 50px;
    height: 50px;
  }
  
  .avatar-emoji {
    font-size: 26px;
  }
  
  .nickname {
    font-size: 16px;
  }
  
  .service-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .service-grid .service-item:nth-child(5) {
    grid-column: 2 / 4;
  }
  
  .function-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  
  .tri-stats {
    margin: 0 15px;
  }
  
  .section {
    margin: 0 15px 15px;
  }
  
  .usage-stats-section {
    margin: 0 15px 15px;
  }
  
  .usage-stats-container {
    flex-direction: column;
    gap: 16px;
  }
  
  .main-stat {
    padding: 16px;
  }
  
  .main-stat-number {
    font-size: 28px;
  }
}

@media (max-width: 480px) {
  .service-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  
  .service-grid .service-item:nth-child(5) {
    grid-column: 2;
  }
  
  .service-icon, .function-icon {
    width: 45px;
    height: 45px;
    font-size: 20px;
  }
  
  .service-text, .function-text {
    font-size: 11px;
  }
  
  .section-title {
    font-size: 16px;
  }
  
  .usage-stats-section {
    margin: 0 12px 12px;
    padding: 16px;
  }
  
  .main-stat {
    padding: 12px;
    gap: 12px;
  }
  
  .main-stat-number {
    font-size: 24px;
  }
  
  .main-stat-label {
    font-size: 12px;
  }
  
  .sub-stat {
    padding: 10px 12px;
  }
  
  .sub-stat-icon {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  
  .sub-stat-title {
    font-size: 12px;
  }
  
  .sub-stat-value {
    font-size: 11px;
  }
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.profile-header {
  animation: fadeInUp 0.6s ease-out;
}

.tri-stats {
  animation: fadeInUp 0.6s ease-out 0.1s both;
}


.section {
  animation: fadeInUp 0.6s ease-out 0.3s both;
}

.usage-stats-section {
  animation: fadeInUp 0.6s ease-out 0.35s both;
}
</style>
